<template>
	<view class="page">
		<u-navbar title="军师详情" is-fixed
			background="url('https://www.yplm888.com//uploads/20220803/7ed305f9a93ba50b049a7725662b18cc.png') no-repeat">
		</u-navbar>
		<!-- <u-navbar back-icon-name="arrow-left" title='军师详情'></u-navbar> -->
		<!-- 顶部照片 -->
		<view class="top-img">
			<image class="img" :src="junshiInfo.bigimage" mode="aspectFill"></image>
		</view>
		<!-- 教师信息 -->
		<view class="teacher-info">
			<image class="teacher-img" :src="junshiInfo.image" mode="aspectFill"></image>
			<view class="left">
				<view class="">
					<text style="margin-right: 20rpx; font-weight: 600;">{{junshiInfo.name}}</text>
					<!-- <u-icon name="eye-fill" color='#ccc' size="18"></u-icon>
					<text style="font-size: 12rpx; color: #ccc; margin-left: 5rpx;">66</text> -->
				</view>
				<view class="address">
					{{junshiInfo.title}}
				</view>
			</view>
			<!-- <view class="right-qr" @click="clickQrcode">
					<i class="iconfont icon-qrcode-1-copy " style="color:#fe466b;"></i>
				</view> -->
			<view class="right-qr" @click="tokefu">
				<u-icon name="server-fill" color='#FE5477' size="40"></u-icon>
			</view>

			<view class="right" @click="changeCollect">
				<u-icon v-if="!isCollect" name="star" color='#ccc' size="40"></u-icon>
				<u-icon v-else name="star-fill" color='#FE5477' size="40"></u-icon>
			</view>
			<view class="num">
				<u-icon style='margin-right: 10rpx;' name="eye" size='22'></u-icon>
				<text>{{junshiInfo.reading_volume}}</text>
			</view>
			<view class="icon-list">
				<u-icon class='icon' name="calendar" size='20'></u-icon>
				<text>{{$u.timeFormat(junshiInfo.createtime, 'yyyy-mm-dd hh:MM:ss')}}</text>
			</view>
		</view>
		<!-- 教师介绍 -->
		<scroll-view class="teacher-detail" :scroll-y="true" :style="'height:' + scrollH+'rpx;'">
			<!-- <view class="title">{{junshiInfo.title}}</view> -->
			<u-parse :html="junshiInfo.content"></u-parse>
		</scroll-view>
		<!-- 相关课程 -->
		<view class="model" v-if="junshiInfo.ProductLst && junshiInfo.ProductLst.length > 0">
			<view class="font-style-xie">相关课程 <text class="video-num">课程数：{{junshiInfo.ProductLst.length}}</text>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
				<view class="show-item" v-for="(item, index) in junshiInfo.ProductLst" :key="item.id"
					@click="toDetail(item.id)">
					<view class="image">
						<image class="img" :src="item.cover_image" mode="scaleToFill"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 免费试听 -->
		<!-- <view class="free-listen">
			<view class="font-style-xie">免费试听</view>
			<view class="list" v-for="(item,index) in 4" :key="index">
				<u-icon name="play-circle-fill" color="#fe466b" size="50"></u-icon>
				<text class="name u-line-1">女人最大的委屈，是男人不觉打飞机啊看附件啊多发点</text>
				<text class="time">2020.01.03</text>
			</view>
		</view> -->
		<qr-madel :src='junshiInfo.wechat_image' :show='showQrcode'></qr-madel>
	</view>
</template>

<script>
	import qrMadel from '../components/qrcodeModal.vue'
	export default {
		components: {
			qrMadel
		},
		data() {
			return {
				old: {
					scrollTop: 0
				},
				isCollect: false,
				junshiInfo: {},
				baseUrl: this.$u.http.config.baseUrl,
				showQrcode: false,
				scrollH: 0,
				hightMore:900
			}
		},
		async onLoad(option) {
			await this.getDetail(option.id)
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth;
					// #ifdef MP-WEIXIN
					that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - that.hightMore;
					// #endif
				}
			});
		},
		onReady() {
			
			
		},
		watch:{
			hightMore(val){
				console.log(val)
				
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.scrollH = res.windowHeight * 750 / res.windowWidth;
						// #ifdef MP-WEIXIN
						that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) - val;
						// #endif
					}
				});
			}
		},
		methods: {
			// 客服
			async tokefu() {
				await this.getConfig()
				let res = await this.$u.api.customerSerivce()
				this.toChat(res.data)
			},
			getConfig() {
				this.$u.api.getChatConfig().then(res => {
					this.config = res.data.corpId
				})
			},
			toChat(data) {
				try {
					wx.openCustomerServiceChat({
						extInfo: {
							url: data.url //客服ID
						},
						corpId: this.config, //企业微信ID
						success(res) {}
					})
				} catch (error) {}
			},
			// 点击二维码
			clickQrcode() {
				this.showQrcode = true
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			// 收藏
			changeCollect() {
				this.$u.api.collect({
					collection_id: this.junshiInfo.id,
					collection_type: 1
				}).then(res => {
					if (res.code == 1) {
						this.isCollect = this.isCollect?0:1
						uni.showToast({
							title: res.msg
						})
					}
				})
			},
			getDetail(id) {
				this.$u.api.getJunshiDetail({
					id
				}).then(async res => {
					this.junshiInfo = res.data
					this.isCollect = res.data.is_collection
					this.hightMore = this.junshiInfo.ProductLst?.length>0?1150:900
				})
			},
			toDetail(id) {
				let token = uni.getStorageSync('token')
				if (token) {
					this.$u.route('/packageB/pages/hotClassDetail/hotClassDetail', {
						id
					})
				} else {
					uni.showToast({
						title: '请登录后操作',
						duration: 1000,
						icon: 'error',
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my',
						})
					}, 1000)
				}
			},
		}
	}
</script>

<style lang="scss">
	.page {
		padding-bottom: 40rpx;
	}

	.top-img {
		height: 600rpx;
		width: 750rpx;
		border-bottom-right-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		background-color: #ccc;

		.img {
			height: 600rpx;
			width: 750rpx;
			border-bottom-right-radius: 50rpx;
			border-bottom-left-radius: 50rpx;
		}
	}

	.teacher-info {
		background-color: #fff;
		display: flex;
		min-height: 200rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: -100rpx;
		border-radius: 30rpx;
		box-shadow: 0 0px 12px 0 rgba(0, 0, 0, 0.1);
		align-items: center;
		padding: 0 20rpx;
		position: relative;

		.icon-list {
			color: #ccc;
			position: absolute;
			bottom: 5rpx;
			left: 20rpx;
			font-size: 20rpx;

			.icon {
				margin-right: 10rpx;
			}
		}

		.num {
			font-size: 20rpx;
			position: absolute;
			top: 0;
			right: 80rpx;
			text-align: center;
			height: 40rpx;
			width: 100rpx;
			color: #FE5477;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			background-color: #FFEBEF;
		}

		.teacher-img {
			margin-top: -20rpx;
			height: 120rpx;
			width: 120rpx;
			border-radius: 75rpx;

		}

		.left {
			margin-top: -20rpx;
			margin-left: 20rpx;

			.address {
				font-size: 20rpx;
				width: 500rpx;
				color: #ccc;
			}
		}

		.right-qr {
			position: absolute;
			right: 100rpx;
			top: 140rpx;
		}

		.right {
			position: absolute;
			right: 30rpx;
			top: 140rpx;
		}
	}


	.teacher-detail {
		width: 710rpx;
		text-align: center;
		margin-top: 10rpx;
		padding: 20rpx;

		.title {
			text-align: center;
			font-weight: 700;
			font-size: 40rpx
		}
	}

	.font-style-xie {
		font-weight: 700;
		font-size: 32rpx !important;
		font-style: italic;

		.video-num {
			font-style: normal;
			font-weight: normal;
			font-size: 16rpx;
			color: #FE5477;
			float: right;
			margin-right: 10rpx;
			margin-top: 10rpx;
		}
	}

	.model {
		margin-top: 00rpx;
		padding: 0 40rpx;

		.scroll-view_H {
			margin-top: 20rpx;
			white-space: nowrap;
			width: 100%;

			.show-item {
				display: inline-block;

				.image {
					height: 150rpx;
					width: 150rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
					background-color: #ccc;

					.img {
						height: 150rpx;
						width: 150rpx;
						border-radius: 20rpx;
					}
				}
			}
		}


	}

	.free-listen {
		// margin-top: 40rpx;
		padding: 0 40rpx;
		padding-bottom: 40rpx;

		.list {
			display: flex;
			height: 60rpx;
			margin-top: 20rpx;
			line-height: 60rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			align-items: center;

			.name {
				margin-left: 10rpx;
				font-weight: 700;
				width: 70%;
			}

			.time {
				color: #ccc;
				float: right;
				margin-right: 10rpx;
			}
		}

	}
</style>
